<template>
  <div class="mobileTheme-area">
    <H5Theme :h5Theme="h5Theme" @cu="delateMobileBg" @uht="updateH5Theme"></H5Theme>
  </div>
</template>
<script>
import { getMobileBgList } from '@/api/setting/activitySetting/theme';
import request from '@/utils/request';
import { defaultH5Theme } from '@/assets/constant/theme';
import H5Theme from './mobile/h5Theme';

export default {
  name: 'mobileTheme',
  data() {
    return {
      h5Theme: defaultH5Theme,
    };
  },
  components: {
    H5Theme,
  },
  created() {
    this.getMoblieList();
  },
  methods: {
    updateH5Theme(val) {
      this.h5Theme = val;
    },
    getMoblieList() {
      getMobileBgList({ params: { splid: this.$store.state.liveId } }).then((res) => {
        console.log('mobileImgList', res);
        if (res.data.phone_piclink && res.data.phone_piclink.indexOf('http') > -1) {
          this.h5Theme = res.data.phone_piclink;
        }
        this.$store.commit('login/updateIsScreenBgLS', res.data.draw_switch);
      });
    },
    /* 取消上传当前的图片 */
    delateMobileBg() {
      console.log('取消上传');
      const data = {
        // liveid: this.$store.state.liveId,
        // mobile_imgurl: '0',
        splid: this.$store.state.liveId,
        phone_piclink: '0',
      };
      request.post('/qiYeNe/update', data).then((res) => {
        console.log('delate-mobileimg', res);
        this.$message({
          message: '取消上传成功',
          type: 'success',
        });
        this.getMoblieList();
        this.h5Theme = defaultH5Theme;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.mobileTheme-area {
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
